<template>
    <n-alert v-if="alertShow" :title="title" :type="type" :bordered="false">
<!--        <div v-if="isLoading" class="loading-container">-->
<!--            <n-spin size="small" type="info" stroke-width="10" stroke="#2080f0"/>-->
<!--            <span class="loading-text">&nbsp;正在验证资源配置，请稍候...</span>-->
<!--        </div>-->
<!--        <div v-else>-->
<!--            {{ errMsg }}-->
<!--        </div>-->
    </n-alert>
    <n-form
        style="margin-top: 12px"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-placement="left"
        label-width="140"
        require-mark-placement="right-hanging"
        :disabled="formDisabled"
        class="flex-container"
    >
        <n-form-item label="订阅名称" path="coltype">
            <n-input v-model:value="form.totalCnt" placeholder="请输入订阅名称"></n-input>
        </n-form-item>
        <n-form-item label="订阅关键字" path="totalCnt">
            <n-input v-model:value="form.totalCnt" placeholder="请输入订阅关键字"></n-input>
        </n-form-item>


        <n-form-item label="排除词" path="address">
            <n-input v-model:value="form.address" placeholder="请输入排除此"></n-input>
        </n-form-item>
        <n-form-item label="订阅地区" path="seniorCnt">
            <n-input v-model:value="form.address" placeholder="请输入订阅地区"></n-input>
        </n-form-item>


        <n-form-item label="行业类别" path="network">
            <n-input v-model:value="form.network" placeholder="请输入行业类别"></n-input>
        </n-form-item>
    </n-form>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import {JBoltApi} from '@/service/request'

const props = defineProps({
    id: {
        type: String
    }
})

const embeddingUrl = computed(() => {
    if (form.value.type == 'TENCENT') {
        return '/embeddingResource/listAllEnabledTypeWithTencent';
    }
    return '/embeddingResource/listAllEnabledType';
})

const uploadUrl = '你的上传接口URL'; // 例如: 'https://your-upload-api.com/upload'
const headers = { /* 你的headers */ }; // 例如: { 'Authorization': 'Bearer your-token' }
const data = { /* 其他你想要发送的数据 */ }; // 例如: { folder: 'photos' }

const handleFinish = (files) => {
    console.log('上传成功', files);
};

const handleError = (error) => {
    console.error('上传失败', error);
};
const title = ref('资源配置正确')
// const type = ref('success')
const errMsg = ref('')
const alertShow = ref(false)
const isLoading = ref(false)
const formDisabled = ref(false) // 新增：表单禁用状态
const formRef = ref(null)
const items = ref(null)

const form = ref({
    id: '',
    name: '',
    coltype: '1',
    embedding: null,
    embeddingResourceId: '',
    url: '',
    username: '',
    password: '',
    databaseName: '',
    enable: true,
    createTime: '',
    timeout: ''
})

const options=[
    {text:'特大型企业', value:'maxType'},{text:'大型', value:'bigType'},{text:'中型', value:'midType'},{text:'小型',value:'smaType'},{text:'微型',value:'micType'},
]

const rules = {
    coltype: {
        required: true,
        message: '请选择资源类型',
        trigger: 'change',
    },
    embedding: {
        required: true,
        message: '请选择Embedding类型',
        trigger: 'change'
    },
    name: {
        required: true,
        pattern: /\S/, // 至少有一个非空白字符
        message: '请输入资源名称',
        trigger: 'change'
    },
    url: {
        required: true,
        pattern: /\S/, // 至少有一个非空白字符
        message: '请输入url',
        trigger: 'change'
    },
    username: {
        required: true,
        pattern: /\S/, // 至少有一个非空白字符
        message: '请输入用户名',
        trigger: 'change'
    },
    password: {
        required: true,
        pattern: /\S/, // 至少有一个非空白字符
        message: '请输入密码',
        trigger: 'change'
    },
    databaseName: {
        required: true,
        pattern: /\S/, // 至少有一个非空白字符
        message: '请输入数据库名称',
        trigger: 'change'
    }
}

const embeddingOptions = ref([])

// 加载编辑数据
async function loadEditData() {
    if (props.id) {
        const {result} = await JBoltApi.get(`/VDBResource/getById/${props.id}`)
        if (result) {
            form.value = result.data
        }

    }
}

defineExpose({
    submit
})

async function submit(fun) {
    console.log('提交表单', form.value)
    await formRef.value?.validate()
    console.debug('提交表单', form.value)
    let url = props.id ? '/VDBResource/update' : '/VDBResource/add'
    if (props.id) {
        await JBoltApi.put(url, form.value)
    } else {
        await JBoltApi.tryPost(url, form.value)
    }
    if (fun) {
        fun()
    }

    return true
}

// 检查资源
async function check() {
    // 表单校验
    try {
        await formRef.value?.validate()
    } catch (error) {
        return // 表单校验失败，直接返回
    }

    // 设置加载状态
    isLoading.value = true
    formDisabled.value = true

    // 显示加载中的提示
    alertShow.value = true
    type.value = 'info'  // 使用info类型，显示为蓝色
    title.value = '正在检测资源配置'
    errMsg.value = '请稍候...'

}


onMounted(() => {
    if (props.id) {
        loadEditData()
    }

})

</script>

<style scoped lang="scss">
.text_tip {
    font-size: 12px;
    color: #999;
}
.flex-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列 */
    gap: 16px;
}
.flex-container .n-form-item {
    width: 100%;
}

</style>
